<template>
    <el-dialog
            title="登录"
            :visible.sync="isShowLogin"
            width="30%"
            center
    >
        <el-form>
            <el-form-item label="user">
                <el-input type="text" id="user" v-model="formName.user" @blur="inputBlur('user',formName.user)"></el-input>
                <p>{{formName.userError}}</p>
            </el-form-item>
            <el-form-item label="password">
                <el-input type="password" id="password" v-model="formName.password" @blur="inputBlur('password',formName.password)"></el-input>
                <p>{{formName.passwordError}}</p>
            </el-form-item>
            <el-button type="primary" @click="submitForm('formName')" v-bind:disabled="formName.beDisabled">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
        </el-form>
    </el-dialog>
</template>

<script>
import axios from '../../http_axios'
import { Message } from 'element-ui'
export default {
  props: [
    'isShowLogin'
  ],
  name: 'Login',
  data () {
    return {
      formName: {
        user: '',
        userError: '',
        password: '',
        passwordError: '',
        beDisabled: false
      },
      beShow: this.isShowLogin
    }
  },
  methods: {
    resetForm: function () {
      this.formName.user = ''
      this.formName.userError = ''
      this.formName.password = ''
      this.formName.passwordError = ''
    },
    submitForm: function (formName) {
      /**
       * //与父组件通信传值
       *this.$emit('showState', [this.beShow,this.formName.user])
       *提交user password
       * @type {string}
       */
      const username = this.formName.user
      const password = this.formName.password
      // console.log(username, password)
      let logigApi = '/api/v1/login'
      axios.post(logigApi, {
        email: username,
        password: password
      })
        .then(function (resp) {
          let res = resp.data
          if (res.message === 'ok') {
            this.isShowLogin = true
            Message.success({
              dangerouslyUseHTMLString: true,
              message: res.data
            })
          } else if (res.message === 'no') {
            Message.error({
              message: res.data
            })
          }
        })
        .catch(function (err) {
          console.log(err)
        })
    },
    inputBlur: function (errorItem, inputContent) {
      if (errorItem === 'user') {
        if (inputContent === '') {
          this.formName.userError = '用户名不能为空'
        } else {
          this.formName.userError = ''
        }
      } else if (errorItem === 'password') {
        if (inputContent === '') {
          this.formName.passwordError = '密码不能为空'
        } else {
          this.formName.passwordError = ''
        }
      }
      if (this.formName.user !== '' && this.formName.password !== '') {
        this.formName.beDisabled = false
      } else {
        this.formName.beDisabled = true
      }
    }
  }
}
</script>

<style scoped>
    html,body{
        margin: 0;
        padding: 0;
        position: relative;
    }
    .dialog{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.8);
    }
    .loginPage{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: 100px;
        margin-left: -175px;
        width: 350px;
        min-height: 300px;
        padding: 30px 20px 20px;
        border-radius: 8px;
        box-sizing: border-box;
        background-color: #fff;
    }
    .loginPage p{
        color: red;
        text-align: left;
    }
</style>
